<template>
  <a-card :bordered="false">
    <h3 class="title">基本信息</h3>
    <div>
      <a-form layout="inline">
        <a-row :gutter="24">

          <a-col :md="8" :sm="12">
            <a-form-item :required="true" label="商品名称">
              <a-input disabled placeholder="请输入商品名称" v-model="goodsDetail.goodsName"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="12">
            <a-form-item :required="true" label="商品编号">
              <a-input disabled placeholder="请输入商品编号" v-model="goodsDetail.goodsCode"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="12">
            <a-form-item :required="true" label="商品类型">
              <a-input disabled v-model="goodsDetail.type.goodsTypeName"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="12">
            <a-form-item :required="true" label="供应商">
              <a-select
                disabled
                @focus="focus"
                ref="select"
                style="width: 150px"
                @change="handleChange"
                v-model:value="goodsDetail.supplierId"
                placeholder="请选择供应商"
              >
                <a-select-option :label="item.realname" :value="item.id" v-for="(item,key) in gyslist" :key="item.id">
                  {{ item.realname }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

      </a-form>

      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="8" :sm="12">
            <a-form-item :required="true" label="供应商商品编号">
              <a-input disabled style="width: 183px" placeholder="请输入供应商商品编号"
                       v-model="goodsDetail.supplierGoodsCode"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="12">
            <a-form-item :required="true" label="性别">
              <a-select
                disabled
                style="width: 186.76px"
                placeholder="请选择性别"
                v-model="goodsDetail.sex"
              >
                <a-select-option :value="0">
                  男
                </a-select-option>
                <a-select-option :value="1">
                  女
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <h3 class="title">商品参数</h3>
      <!--第三行-->
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="8" :sm="12" v-for="item in goodsParamList">
            <a-form-item :required="true" :label="item.paramName">
              <!--              @blur="saveGoodsParam(item)"-->
              <a-input disabled placeholder="请输入参数数值" v-model="item.inputValue"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <h3 class="title">返修参数</h3>
    <!-- table区域-begin -->
    <div>

      <a-list
        class="demo-loadmore-list"
        :loading="loading"
        item-layout="horizontal"
        :data-source="fanxiuList"
      >
        <a-list-item slot="renderItem" slot-scope="item, index">
          返修参数：
          <a-input v-model="item.fanxiuName" disabled="true" style="width: 150px"></a-input>
          大于等于：
          <a-input v-model="item.fanxiuMin" disabled="true" style="width: 150px"></a-input>
          --
          小于：
          <a-input v-model="item.fanxiuMax" disabled="true" style="width: 150px"></a-input>
          &nbsp;&nbsp;
          <!--          <a-button @click="delFanxiuFunc(item.id)">删除</a-button>-->
        </a-list-item>
      </a-list>
      <!--      <div>
              <br/>
              <a-button style="width: 500px;height: 36px;" @click="xianshi=true">添加</a-button>
              <br/>
            </div>-->

      <!--      <div v-if="xianshi">
              返修参数：
              <a-input placeholder="请填写返修参数" v-model="fanxiuname" style="width: 150px"></a-input>
              大于等于：
              <a-input-number placeholder="返修值范围" :min="0" :max="9999999" v-model="minNumbers"
                              style="width: 150px"></a-input-number>
              &#45;&#45; 小于：
              <a-input-number placeholder="返修值范围" :min="0" :max="9999999" v-model="maxNumbers"
                              style="width: 150px"></a-input-number>

            </div>-->
      <br/>
      <!--      <a-button type="primary" @click="saveFanxiuFunc">保存返修参数</a-button>&nbsp;&nbsp;-->
    </div>


    <h3 class="title">商品规格</h3>
    <!--    <a-upload style="margin-left: 8px" name="file" :showUploadList="false"
                  :multiple="false"
                  :customRequest="myupload"
                  :action="importExcelUrl" @change="handleImportExcel">
          <a-button type="primary" icon="import">
            <upload-outlined/>
            导入
          </a-button>
        </a-upload>-->
    <!--    <a-button :href="exportFabric" style="margin-left: 8px" type="primary" icon="export">下载模板</a-button>-->
    <div>
      <a-table
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="listGuige"
        :pagination="false"
        class="j-table-force-nowrap">
        <span slot="action" slot-scope="text, record">
                   <a-menu-item style="display: inline;margin-left: 10px">
                      <a-popconfirm title="确定删除吗?" @confirm="() => delGuigeFunc(record.id)">
                        <a style="color:deepskyblue">删除</a>
                      </a-popconfirm>
                    </a-menu-item>
        </span>
      </a-table>
    </div>


    <h3 class="title">商品尺码</h3>
    <!--    <a-upload style="margin-left: 8px" name="file" :showUploadList="false"
                  :multiple="false"
                  :customRequest="myupload2"
                  :action="importExcelUrl" @change="handleImportExcel">
          <a-button type="primary" icon="import">
            <upload-outlined/>
            导入
          </a-button>
        </a-upload>-->
    <!--    <a-button :href="exportFabric2" style="margin-left: 8px" type="primary" icon="export">下载模板</a-button>-->
    <div>
      <a-table
        size="middle"
        bordered
        rowKey="id"
        :columns="columns2"
        :dataSource="listSize"
        :pagination="false"
        class="j-table-force-nowrap">
        <span slot="action" slot-scope="text, record">
                    <a-menu-item style="display: inline;margin-left: 10px">
                      <a-popconfirm title="确定删除吗?" @confirm="() => delSizeFunc(record.id)">
                        <a style="color:deepskyblue">删除</a>
                      </a-popconfirm>
                    </a-menu-item>
        </span>
      </a-table>
    </div>


    <h3 class="title">其他</h3>

    <a-form layout="inline">
      <a-form-item label="上传商品图片">
        <j-image-upload disabled class="avatar-uploader" text="上传" v-model="goodsDetail.goodsMainImg"
                        style="margin-top: 8px;"></j-image-upload>
      </a-form-item>
    </a-form>

    <a-form layout="inline">
      <a-row :gutter="24">
        <a-col :md="8" :sm="12">
          <a-form-item label="起订量">
            <a-input-number disabled placeholder="请输入起订量" min="1" v-model="goodsDetail.orderNumber"></a-input-number>
          </a-form-item>
        </a-col>

        <a-col :md="8" :sm="12">
          <a-form-item label="关联版号">
            <a-input disabled v-model="goodsDetail.plateNumber"></a-input>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :md="8" :sm="12">
          <a-form-item label="适用季节">
            <a-input disabled v-model="goodsDetail.season"></a-input>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :md="8" :sm="12">
          <a-form-item label="二维码">
            <img style="width:100px;height:100px"
                 :src="goodsDetail.codeLink"/>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24" style="margin-top: 20px">
        <a-col :md="8" :sm="12">
          <a-form-item label="交期">
            <a-input disabled placeholder="请输入交期" type="textarea" :auto-size="{ minRows: 3, maxRows: 10 }"
                     v-model="goodsDetail.deliveryTime"></a-input>
          </a-form-item>
        </a-col>
      </a-row>

      <a-form layout="inline">
        <a-form-item label="规格尺码说明">
          <j-image-upload disabled class="avatar-uploader" text="上传" v-model="goodsDetail.instructionsImgs"
                          style="margin-top: 8px;"></j-image-upload>
        </a-form-item>
      </a-form>

    </a-form>
    <!--    <a-button type="primary" @click="updateGoodsFunc">提交</a-button>-->
    <a-button style="margin-left:10px" type="primary" @click="$router.go(-1)">返回</a-button>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import upload from 'element-ui'
import {getAction, postAction} from "../../api/manage";
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import JImageUpload from '../../components/jeecg/JImageUpload'

export default {
  name: "AddFabric",
  components: {
    JImageUpload
  },
  created() {
    this.goodsid = this.$route.query.id
    this.goodsDetailFunc()
    this.getgys()
    this.goodsParamFunc()
    this.listGuigeFunc()
    this.listSizeFunc()
    this.listFanxiuFunc()
    // this.getFabricType()
    this.typrDetail()
    // this.createGoodsFunc()
  },
  data() {
    return {
      rules: {
        test: [
          {required: true}
        ]
      },
      upload,
      locale,
      season: '',
      gender: '', // 性别
      goodsCode: '', // 商品编号
      gysgoodscode: '', // 供应商商品编号
      paramList: [], // 商品类型参数列表
      typedetail: {}, // 类型详情
      goodsid: '', // 商品id
      fanxiuname: '',    // 返修参数名称
      minNumbers: '', // 区间最小值
      maxNumbers: '', // 区间最大值
      fanxiuList: [], // 已设置返修参数列表
      listGuige: [], // 已设置的规格
      listSize: [], // 已设置的尺码
      xianshi: false, // 是否显示
      data: [], // 返修参数列表
      goodsDetail: {}, // 商品详情
      goodsParamList: [], // 商品参数列表
      // 规格表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '规格名称',
          align: "center",
          dataIndex: 'specificationsName'
        },
        {
          title: '规格编号',
          align: "center",
          dataIndex: 'specificationsCode'
        },
        {
          title: '备注信息',
          align: "center",
          dataIndex: 'remark'
        },
        /*{
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          // fixed:"right",
          width: 147,
          scopedSlots: {customRender: 'action'}
        }*/
      ],

      // 尺码表头
      columns2: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '尺码',
          align: "center",
          dataIndex: 'sizeName'
        },
        {
          title: '尺码编号',
          align: "center",
          dataIndex: 'sizeCode'
        },
        {
          title: '备注信息',
          align: "center",
          dataIndex: 'remark'
        },
        /*{
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          // fixed:"right",
          width: 147,
          scopedSlots: {customRender: 'action'}
        }*/
      ],


      dialogVisible: false,
      dialogImageUrl: '',//上传的图片路径
      gysid: undefined, // 供应商ID

      remark: '',// 交期
      banhao: '',// 关联版号
      inventory: '',// 起订量
      gyslist: [], // 查询到的供应商列表
      url: {
        gysList: '/fabricCenter/selectGYS', // 供应商列表
        paramlist: '/goodsCenter/paramlist', // 已经设置的参数列表
        goodsTypeByGroup: '/goodsCenter/goodsTypeByGroup', // 获取商品类型
        createGoods: '/goodsCenter/createGoods', // 一开始就创建一个商品
        saveGoodsParam: '/goodsCenter/saveGoodsParam', // 设置商品参数
        saveFanxiu: '/goodsCenter/saveFanxiu', // 设置返修参数
        listFanxiu: '/goodsCenter/listFanxiu', // 已设置的返修参数列表
        delFanxiu: '/goodsCenter/delFanxiu', // 删除已设置的返修参数
        importguigeExcel: '/goodsCenter/importguigeExcel', // 导入商品规格
        exportGuige: 'goodsCenter/exportGuige', // 导出规格模板
        exportSize: 'goodsCenter/exportSize', // 导出尺码模板
        listGuige: '/goodsCenter/listGuige', // 已经设置的商品规格
        delGuige: '/goodsCenter/delGuige', // 删除已经设置的商品规格
        importSizeExcel: '/goodsCenter/importSizeExcel', // 商品导入尺码excel
        listSize: '/goodsCenter/listSize', // 查询已经设置的商品尺码
        delSize: '/goodsCenter/delSize', // 删除已经设置的商品尺码
        updateGoods: '/goodsCenter/updateGoods', // 更新商品
        goodsDetail: '/goodsCenter/goodsDetail', // 商品详情
        goodsParam: '/goodsCenter/goodsParam', // 商品已设置的参数


        fabricType: '/fabric/getFabricTypeList', // 面料类型列表
        addFabric: '/fabricCenter/addFabric' // 添加面料
      },
      value: '0',
      previewVisible: false,
      previewImage: '',
      fileList: [], // 商品图片
      fileList2: [], // 尺码说明图片
    }
  },

  computed: {
    importguigeExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importguigeExcel}`
    },
    importSizeExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importSizeExcel}`
    },
    exportFabric: function () {
      return `${window._CONFIG['domianURL']}/${this.url.exportGuige}`
    },
    exportFabric2: function () {
      return `${window._CONFIG['domianURL']}/${this.url.exportSize}`
    },
  },
  methods: {

    /**
     * 获取商品已经设置的参数
     */
    goodsParamFunc() {
      getAction(this.url.goodsParam, {
        'id': this.$route.query.id
      }).then(res => {
        if (res.code == '200') {
          this.goodsParamList = res.result
        }
      })
    },

    /**
     * 获取商品详情
     */
    goodsDetailFunc() {
      getAction(this.url.goodsDetail, {
        'id': this.$route.query.id
      }).then(res => {
        if (res.code == '200') {
          this.goodsDetail = res.result
        }
      })
    },

    /**
     * 更新商品，启用产品
     */
    updateGoodsFunc() {
      getAction(this.url.updateGoods, {
        'id': this.goodsid,
        'goodsCode': this.goodsCode,
        'supplierId': this.gysid,
        'supplierGoodsCode': this.gysgoodscode,
        'sex': this.gender,
        'goodsMainImg': this.fileList,
        'orderNumber': this.inventory,
        'plateNumber': this.banhao,
        'season': this.season,
        'deliveryTime': this.remark,
        'instructionsImgs': this.fileList2
      }).then(res => {
        if (res.code == '200') {
          this.$message.success("操作成功")
          this.$router.go(-1)
        }
      })
    },

    /**
     * 删除已经设置的商品尺码
     */
    delSizeFunc(id) {
      getAction(this.url.delSize, {
        'id': id
      }).then(res => {
        if (res.code == '200') {
          this.listSizeFunc()
          this.$message.success("操作成功")
        }
      })
    },

    /**
     * 已经设置的尺码
     */
    listSizeFunc() {
      getAction(this.url.listSize, {
        'goodsid': this.goodsid
      }).then(res => {
        if (res.code == '200') {
          this.listSize = res.result
        }
      })
    },

    // 导入商品尺码excel
    myupload2(data) {
      let fdata = new FormData()
      fdata.append('file', data.file)
      fdata.append('goodsid', this.goodsid)
      postAction(this.url.importSizeExcel, fdata).then(res => {
        if (res.code == '0') {
          this.$message.success("导入成功")
          this.listSizeFunc()
        } else {
          this.$message.error(res.message)
        }
      })
    },

    /**
     * 删除已经设置的商品规格
     */
    delGuigeFunc(id) {
      getAction(this.url.delGuige, {
        'id': id
      }).then(res => {
        if (res.code == '200') {
          this.listGuigeFunc()
          this.$message.success("操作成功")
        }
      })
    },

    /**
     * 已经设置的规格
     */
    listGuigeFunc() {
      getAction(this.url.listGuige, {
        'goodsid': this.goodsid
      }).then(res => {
        if (res.code == '200') {
          this.listGuige = res.result
        }
      })
    },

    // 导入商品规格excel
    myupload(data) {
      let fdata = new FormData()
      fdata.append('file', data.file)
      fdata.append('goodsid', this.goodsid)
      postAction(this.url.importguigeExcel, fdata).then(res => {
        if (res.code == '0') {
          this.$message.success("导入成功")
          this.listGuigeFunc()
        } else {
          this.$message.error(res.message)
        }
      })
    },

    /**
     * 删除返修参数
     */
    delFanxiuFunc(id) {
      getAction(this.url.delFanxiu, {
        'id': id
      }).then(res => {
        if (res.code == '200') {
          this.listFanxiuFunc()
          this.$message.success('操作成功');
        }
      })
    },

    /**
     * 已设置的返修参数列表
     */
    listFanxiuFunc() {
      getAction(this.url.listFanxiu, {
        'goodsid': this.goodsid
      }).then(res => {
        if (res.code == '200') {
          this.fanxiuList = res.result
        }
      })
    },

    /**
     * 新增返修参数
     */
    saveFanxiuFunc() {
      if (this.minNumbers >= this.maxNumbers) {
        this.$message.warning('你有毛病是吧');
        return
      } else {
        getAction(this.url.saveFanxiu, {
          'fanxiuName': this.fanxiuname,
          'fanxiuMin': this.minNumbers,
          'fanxiuMax': this.maxNumbers,
          'goodsId': this.goodsid
        }).then(res => {
          if (res.code == '200') {
            this.$message.success('操作成功');
            this.listFanxiuFunc()
          } else {
            this.$message.warning(res.message);
          }
        })
      }
    },

    /**
     * 设置商品参数
     * @param param 参数对象
     */
    saveGoodsParam(param) {
      getAction(this.url.saveGoodsParam, {
        'parameterId': param.id,
        'paramvalue': param.paramvalue,
        'goodsid': this.goodsid
      }).then(res => {
        if (res.code == '200') {
          // this.$message.success('操作成功');
        }
      })
    },

    /**
     * 一开始就创建一个商品
     */
    createGoodsFunc() {
      getAction(this.url.createGoods, {
        'group': this.$route.query.group
      }).then(res => {
        if (res.code == '200') {
          this.goodsid = res.message
          // alert(this.goodsid)
        }
      })
    },

    /**
     * 根据商品系列获取商品类型
     */
    typrDetail() {
      // alert(this.goodsDetail.goodsSeriesId)
      getAction(this.url.goodsTypeByGroup, {
        'group': this.goodsDetail.goodsSeriesId == undefined ? this.$route.query.group : this.goodsDetail.goodsSeriesId
      }).then(res => {
        if (res.code == '200') {
          this.typedetail = res.result
        }
      })
    },

    /**
     * 获取参数列表
     */
    getFabricType() {
      getAction(this.url.paramlist, {
        'groupid': this.goodsDetail.goodsSeriesId
      }).then(res => {
        if (res.code == '200') {
          this.paramList = res.result
        }
      })
    },

    getgys() { // 获取供应商列表
      getAction(this.url.gysList).then(res => {
        this.gyslist = res.result
      })
    },


    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    //上传图片成功函数
    handleSuccess(response, file, fileList) {
      var result = response;
      this.dialogImageUrl = result.data;
    },
    handleExceed(files, fileList) {
      // this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      this.$message.warning("上传文件超出限制");
    },
  }
}
</script>
<style scoped lang="less">
h3.title {
  height: 30px;
  line-height: 30px;
  position: relative;
  font-size: 16px;
  color: #333;
  font-weight: 700;
  margin-bottom: 25px;

  &
  :after {
    position: absolute;
    height: 100%;
    width: 5px;
    position: absolute;
    left: -25px;
    top: 0px;
    background-color: rgba(74, 74, 74, 1);
    content: "";
  }

}
</style>
